<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="com.yaodian100.core.common.utils.ServerValue"%>
<%@ include file="/taglibs.jsp"%>
<link rel="stylesheet" href="/css/jquery.tooltip.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/ui.jqgrid.css" />
<link href="/css/ddaccordion.css" rel="stylesheet" type="text/css" media="screen" />
<c-rt:set var="midContextPath" value='<%=ServerValue.getMidContextPath()%>'/>
<script src="/js/jquery.tooltip.min.js" type="text/javascript"></script>
<script src="/js/grid.locale-en.js" type="text/javascript"></script>
<script src="/js/jquery.jqGrid.min.js" type="text/javascript" charset="UTF-8"></script>
<s:url var="supplierPops" value="/json/supplierPops.do"/>
<s:url var="brandPops" value="/json/brandPops.do"/>
<script type="text/javascript" charset="UTF-8" src="/js/jquery.alphanumeric.js"></script>
	<script language="javascript">
		var content;
		var qry_target = '01';
		$().ready( function() {
			if ( "" == "${productIdParam}" )
				$("#productIdParam").val("可以用逗号输入商品编号查询").css("color","#aaa");
			
			$("#productIdParam").focus(function(){
				if($("#productIdParam").val()=='可以用逗号输入商品编号查询')
					$("#productIdParam").val("").css("color","#000");
				$("#productIdParam").attr('class','focus-ipt ipt-w20');
			}).blur(function(){
				if($("#productIdParam").val()=='')
					$("#productIdParam").val("可以用逗号输入商品编号查询").css("color","#aaa");
				$("#productIdParam").attr('class','ipt-w20');
			});
			 
			//$("#productIdParam").numeric({allow:","});
			$("#supplierIdParam").numeric();
			$("#getSupplier").click(function() {
				//qry_target = 'member';
				doAR('${supplierPops}', 'dialog'); 
				openDialog('供应商搜寻',content, 550, 440);
			});	

			//$("#brandIdParam").numeric();
			$("#getBrand").click(function() {
				doAR('${brandPops}', 'dialog'); 
				openDialog('品牌搜寻',content, 550, 440);
			});	
					
			$("tr[id*='tdDesc_']").tooltip(); 
			$("#productForm").submit(function(){
				if ( 0 == $(":checkbox[name='prdtDelete']:checked").size() ){
					alert("请勾择要修改的商品");
					return false;
				} 
				if ( "" == $("#productAttribute").val() ){
					alert("请选择销售状态");
					return false;
				}
				return true;
			});
			//load default value
			if ( "" != "${categoryLevel1Param}"){ 
				$('#elementSelect').find('option').remove().end();
				$("#categorySelect option[value='${categoryLevel1Param}']").attr('selected', 'selected');  
				$.post("${midContextPath}/category/getProductCategory.do",{categoryid:"${categoryLevel1Param}"},elementSelectCallback,"json");
			}
			
			//無用
			$("#categorySelect").change(function(){
				if ( "" != $(this).val()  ){
					$.ajax({
					    url: '${midContextPath}/category/getProductCategory.do',
					    type: 'post',
					    dataType: 'json',
					    data: {categoryid:$(this).val(), callback: 'elementSelectCallback'},
					    cache: false,
					    beforeSend: function(xhr) {
								$('#elementSelect').find('option').remove().end();
					    },
					    complete:function(){
					    },
					    success: function( strData ){
					    	elementSelectCallback(strData);
						}
					});
				}
			});		
		});
		function elementSelectCallback(categories){
			$('#elementSelect').append($("<option></option>").attr("value","").text("--请选择--"));
			for( var i = 0 ; i < categories.length; i++ ){
					$('#elementSelect').append($("<option></option>").attr("value",categories[i].id).text(categories[i].name));
			}
			if ( "" != "${categoryLevel2Param}" )
				$("#elementSelect option[value='${categoryLevel2Param}']").attr('selected', 'selected');
		}	
		function replaceProductIdParam(){
			if($("#productIdParam").val()=='可以用逗号输入商品编号查询')
				$("#productIdParam").val("");
		}
	</script>
<div class="data-form">
<s:form id="productSearchForm" method="post">
	<b>商品编号：</b>
	<s:textfield name="productId" size="80" title="商品编号" id="productIdParam"></s:textfield>
	<br/>
	<b>商品名称：</b>
	<s:textfield name="productName" title="商品名称" size="30" id="productNameParam"></s:textfield>
	<b>商品型态：</b>
	<s:select name="productType" list="#{'':'全部', '0':'一般', '1':'预购', '2':'赠品', '3':'配件', '7':'限定立即购买商品'}" id="productTypeParam" title="商品型态" >
	</s:select>
  <b>销售状态：</b> 
  <s:select name="productStatus" list="attributeMenu.options" listKey="key"  headerKey="" headerValue="全部" listValue="value.name"/>
  <br/>
    <b>供应商编号：</b>
	<s:textfield name="supplierId" id="supplierIdParam" maxlength="6"/>
	<img class="ui-icon ui-icon-search" src="/images/none.gif" style="height:16px; width:16px; position:relative; display:inline;" 
		id="getSupplier"/>  
	<b>品牌：</b>
	<s:textfield name="brandId" id="brandIdParam"/>
	<img class="ui-icon ui-icon-search" src="/images/none.gif" style="height:16px; width:16px; position:relative; display:inline;" 
		id="getBrand"/>  
	
	<b>分类：</b>
	<s:property value="%{category.name}"/>
	<s:hidden name="categoryId"></s:hidden>
	&nbsp;
	<input type="button" id="searchProductButton" value="搜寻" />
</s:form>
</div>

<p></p>
<br/><br/><br/>
<s:form action="editProductAttribute.do" method="post" id="productForm">

<c:url value="/js" var="jsPath"/>
<script src="${jsPath}/jquery.form.js" type="text/javascript" charset="UTF-8"></script>

<!--商品選取和確定後的動作-->
<script type="text/javascript">
$(function() {
	var productIdForm = $("#selectedProductListForm");////存放已選取商品 product id 的  form（不在這一頁）
	var savedSelectedProductId = productIdForm.children("[name='selectedProductId']");
	var loadingDialog = $("#loadingImg");//不在這一頁
	var productSelectWindow = $("#productSelectWindow");//不在這一頁
	var productSearchForm = $("#productSearchForm");
	var productIdCheckbox = $(".productCheckbox");
	
	productIdCheckbox.each(function(n) {
		if (productIdForm.children("[value='" + $(this).val() + "'][name='selectedProductId']").length > 0) {
			$(this).attr("checked", true);
		}
	});
	
	productSearchForm.submit(function() {
		//清空 productId 欄位的說明
		replaceProductIdParam();
	});
	
	//查詢
	$("#searchProductButton").click(function(){
		replaceProductIdParam();
		productSearchForm.ajaxSubmit({
		    url: '${midContextPath}/reportProductClick/productSelect/productSearch.do',
		    cache: false,
		    type: 'post',
		    beforeSend: function(){
		    	loadingDialog.dialog('open');
				//清空 productId 欄位的說明
			},
		    success: function( strData ){
		    	loadingDialog.dialog('close');
		    	productSelectWindow.html(strData);
			}
		});
	});
	
	//點選商品核取方塊
	$(".productCheckbox").click(function(){
		var productIdHiddenInput = $(this).next('input[:first:hidden]');//存放 product id 的 hidden input
		var savedSameSelectedProductId = productIdForm.children("[value='" + $(this).val() + "'][name='selectedProductId']");
		var existingRecordSameProductId = $("#mainForm input:hidden[name='productId'][value='" + $(this).val() + "']");
		
		if(existingRecordSameProductId.length > 0) {
			alert("商品已存在，不可重覆选取");
			return false;
		}

		if ($(this).attr("checked")) {
			//選取
			if (savedSameSelectedProductId.length > 0) {
				alert("該商品已被选取");
				return true;//還是要勾起來，表示有被選取，但是不再往下執行
			}
			if (savedSelectedProductId.length >= 5) {
				alert("不可选多於 5 笔");
				return false;
			}
			
			var newRecordCount = $("input:hidden:[name='newRecord']:[value='true']").length;
			var savedSelectedProductIdCount = productIdForm.children("[name='selectedProductId']").length;
			
			if ((newRecordCount + savedSelectedProductIdCount + 1) > 5) {
				alert('每次新增不可多於 5 笔');
				return false;
			}
			productIdForm.append(productIdHiddenInput.clone());
		} else {
			//取消選取
			savedSameSelectedProductId.remove();
		}
	});
	
	//確定
	$(".confirmSelectProducts").click(function(){
		var savedSameSelectedProductId = productIdForm.children("input[name='selectedProductId']");

		if (savedSameSelectedProductId.length <= 0) {
			alert("没有选取商品");
			return;
		}
		
		productIdForm.ajaxSubmit({
		    url: '${midContextPath}/reportProductClick/viewByCategory/productRows.do',
		    type: 'post',
		    cache: false,
		    beforeSend: function(){
		    	loadingDialog.dialog('open');
			},
		    success: function( strData ){
		    	loadingDialog.dialog('close');
		    	//$(".insertClickedRows").after(strData);
		    	insertProductRowsToTable(strData);
		    	productSelectWindow.dialog('close');
			}
		});
	});
	//取消
	$(".cancelSelectProducts").click(function(){
    	productSelectWindow.dialog('close');
	});
});
</script>
每次最多只能選取 5 筆資料
<!--table-->
<table class="tb-1" width="100%">
	<thead>
		<tr>
			<th>#</th>
			<th>商品图</th>
			<th>商品编号</th>
			<th>商品名称</th>
		</tr>
	</thead>
	<tbody>
	    <c-rt:forEach items="${productList}" var="product" varStatus="rows_index">
			<tr class="${rows_index.count % 2 == 0 ? 'bg-yl' : ''}" id="tdDesc_${rows_index.count}" title="${not empty rsmap ?rsmap[product.productId]:''}">
				<td>
					<input class="productCheckbox" type="checkbox" value="${product.productId}" />
					<input name="selectedProductId" type="hidden" value="${product.productId}" />
				</td>
				<td><img onError="this.src='/PImg/blank_75.gif'" src="/PImg/${fn:substring(product.productId,0,4)}/${product.productId}/${product.productId}_m75.jpg"/></td>
				<td>${product.productId}</td>
				<td>${product.productName}</td>
			</tr>
		</c-rt:forEach>
	</tbody>
</table>
<br />
<input class="confirmSelectProducts" type="button" value="碓定"/>
<input class="cancelSelectProducts" type="button" value="取消"/>

<script type="text/javascript" charset="UTF-8" >
	var productSelectWindow = $("#productSelectWindow");//ajax container（不在這一頁）
	var loadingDialog = $("#loadingImg");//不在這一頁
	
	$(function() {
		var pageLinks = $("div.page-change a");
		//分頁動作調整
		pageLinks.click(function(e){
			e.preventDefault();//取消連結原有的功能
			
			var href = $(this).attr("href");
			var pageNumber = extractPageNumberFromHref(href);

			$.ajax({
			    url: '${midContextPath}/reportProductClick/productSelect/productSearch.do',
			    type: 'post',
			    data: {'pager.currentPage':pageNumber},
			    cache: false,
			    beforeSend: function( strData ){
			    	loadingDialog.dialog('open');
				},
			    success: function( strData ){
			    	loadingDialog.dialog('close');
			    	productSelectWindow.html(strData);
			    	$( 'html, body' ).animate( { scrollTop: 0 }, 0 );
				}
			});	  
			return false;
		});
	});
	
	//從分頁連結抓出要連結的目標頁碼
	function extractPageNumberFromHref(href) {
		var splitByQuestionMark = href.split('?');
		if (splitByQuestionMark.length < 2) {
			return '';
		}
		var parameterArray = splitByQuestionMark[1].split('&');
		for (var i = 0; i < parameterArray.length; i++) {
			var parameterPair = parameterArray[i].split('=');
			if (parameterPair[0] == 'pager.currentPage') {
				return parameterPair[1];
			}
		}
		return '';
	}
</script>
<yaodian100:pageutil link="list.do" pagerObj="${pager}" />
</s:form>